<template>
  <div class="notify" v-if="props.statisticsShow">
    <van-overlay
      :show="props.statisticsShow"
      :lock-scroll="false"
      z-index="100"
    >
      <div class="wrapper" @click.stop>
        <div
          class="bg-[#1a2c38] text-white p-4 rounded-lg max-w-[500px] w-full"
        >
          <div class="flex justify-between items-center mb-4">
            <div class="text-base font-bold">
              <van-icon name="bell" /> {{ $t("page.navbar.statiscation") }}
            </div>
            <button class="text-gray-400 hover:text-gray-200">
              <van-icon
                @click="closeStatistics"
                class="cursor-pointer"
                name="cross"
              />
            </button>
          </div>
          <div class="">
            <div class="mb-4">
              <div class="text-lg font-semibold">
                {{ main.user_detail.user_name }}
              </div>
              <div class="text-xs text-gray-400">
                {{ $t("page.vip.accession") }}:
                {{ getTime(main.vipinfo.created_at) }}
              </div>
            </div>
            <div class="mb-4">
              <div class="flex justify-between items-center">
                <span>{{ $t("page.vip.yourvipprogress") }}</span>
                <span>{{ getExp(main.vipinfo.exp) }} % </span>
              </div>
              <div class="w-full bg-gray-700 h-2 rounded mt-1">
                <div
                  class="bg-gray-500 h-2 rounded"
                  :style="{ width: getExp(main.vipinfo.exp) + '%' }"
                ></div>
              </div>
            </div>
            <div class="mb-4">
              <div class="flex justify-between items-center">
                <span>
                  <!-- {{ $t("page.vip.currentLevel") }} -->
                  {{ $t("layer.activity.VIP") }}
                  {{ main.vipinfo.now_level }}</span
                >
                <span>
                  {{ $t("layer.activity.VIP") }} {{ main.vipinfo.next_level }}
                </span>
              </div>
            </div>

            <!-- <div class="mb-4 grid grid-cols-2 gap-4">
              <div>
                <label class="block text-gray-400 text-sm">{{ $t("layer.statistics.classification") }}</label>
                <div class="
                <template #append></template>relative">
<select
  class="block appearance-none w-full bg-gray-700 border border-gray-600 text-white py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:bg-gray-600">
  <option>全部</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400">
  <van-icon name="arrow-down" />
</div>
</div>
</div>
<div>
  <label class="block text-gray-400 text-sm">{{ $t("layer.statistics.money") }}</label>
  <div class="relative">
    <select
      class="block appearance-none w-full bg-gray-700 border border-gray-600 text-white py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:bg-gray-600">
      <option>全部</option>
    </select>
    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400">
      <van-icon name="arrow-down" />
    </div>
  </div>
</div>
</div> -->
            <div class="grid grid-cols-2 gap-4">
              <div class="bg-gray-700 p-4 rounded">
                <div class="text-gray-400 text-sm">
                  {{ $t("layer.statistics.Totalbets") }}
                </div>
                <div class="text-lg font-semibold">
                  {{ main.vipinfo.bet_count }}
                </div>
              </div>
              <div class="bg-gray-700 p-4 rounded">
                <div class="text-gray-400 text-sm">
                  {{ $t("layer.statistics.Wins") }}
                </div>
                <div class="text-lg font-semibold">
                  {{ main.vipinfo.bet_win_count }}
                </div>
              </div>
              <div class="bg-gray-700 p-4 rounded">
                <div class="text-gray-400 text-sm">
                  {{ $t("layer.statistics.Losses") }}
                </div>
                <div class="text-lg font-semibold">
                  {{ main.vipinfo.bet_lose_count }}
                </div>
              </div>
              <div class="bg-gray-700 p-4 rounded">
                <div class="text-gray-400 text-sm">
                  {{ $t("layer.statistics.Totalamount") }}
                </div>
                <div class="text-lg font-semibold">
                  {{ main.vipinfo.bet_amount_total }}
                  <span class="text-green-500"
                    ><i class="fas fa-dollar-sign"></i
                  ></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, watch, computed } from "vue";
const loading = ref(true);
import { dateTimeZone } from "../../utils/date";
const props = defineProps(["statisticsShow"]);
const emit = defineEmits(["statisticsClose"]);
import { mainAct } from "@/store/activeda";
const main = mainAct();

const closeStatistics = () => {
  emit("statisticsClose");
};

onMounted(() => {
  setInterval(() => {
    loading.value = false;
  }, 2000);
});

onBeforeUnmount(() => {});

const getTime = time => {
  return dateTimeZone(time, "{y}-{m}-{d} {h}:{i}:{s}", main.timeZone);
};

const getExp = exp => {
  return Math.floor(exp * 100) / 100;
};
</script>
<style scoped lang="less">
@media (min-width: 600px) {
  .backIcon {
    display: none !important;
  }

  .backIcon2 {
    display: block !important;
  }

  .list-box {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 10px;
  }
}

.notify {
  // width: 375px;
  /*width: 100%;*/
  /*height: 100%;*/
  background-color: #0f212e;
  color: #b1bad3;
  position: relative;
}

.backIcon {
  display: block;
}

.list-box {
  max-height: 300px;
  overflow-y: auto;
  padding-right: 10px;
}

.backIcon2 {
  display: none;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>
